<template>
  <div class="menu_extensions">
    <Card class="extension_item"
          :padding="0"
          v-for="(item) in extensions"
          :key="item.id">
      <div class="extension_item_content">
        <div class="item_left">
          <img class="item_left_img"
               :src="item.icon"
               alt="">
        </div>
        <div class="item_center">
          <div class="item_title"
               v-text="item.label"></div>
          <div class="item_desc"
               v-text="item.desc"></div>
        </div>
        <div class="item_right">
          <Button type="primary"
                  :icon="item.installed ? 'md-cloud-done' : 'md-cloud-download'"
                  :disabled="item.installed"
                  :loading="isLoading(item.id)"
                  @click="install(item)"
                  size="small">
            <span v-if="item.installed">已安装</span>
            <span v-else-if="!isLoading(item.id)">安装</span>
            <span v-else>安装中...</span>
          </Button>
          <!-- {{item.installed ? '已安装' : '安装'}} -->
          <!-- <Button type="primary"
                  icon="md-cloud-download"
                  size="small">安装</Button> -->
        </div>
      </div>
    </Card>
  </div>
</template>

<script>
import { Card, Button } from 'view-design'

const INSTALL_STATUS = {
  'downloading': 'DOWNLOADING', // 下载中
  'downloadedSucceed': 'DOWNLOAD_SUCCEED', // 下载成功
  'downloadFailed': 'DOWNLOAD_FAILED', // 下载失败
  'decompressing': 'DECOMPRESSING', // 解压中
  'decompressSucceed': 'DECOMPRESS_SUCCEED', // 解压成功
  'decompressFailed': 'DECOMPRESS_FAILED', // 解压失败
  'installing': 'INSTALLING', // 安装中
  'installSucceed': 'INSTALL_SUCCEED', // 安装成功
  'installFailed': 'INSTALL_FAILED' // 安装失败
};
export default {
  name: 'Extensions',
  components: {
    Card,
    Button,
  },
  data () {
    return {
      INSTALL_STATUS,
      extensions: [
      ],
      installs: {}
    }
  },
  created () {
    this.listExtension()
  },
  computed: {
    isLoading () {
      return function (id) {
        return (this.installs[id] && (this.installs[id].status !== this.INSTALL_STATUS.installSucceed) && (this.installs[id].status !== this.INSTALL_STATUS.installFailed))
      }
    }
  },
  mounted () {
    bbtools.on('extension-list-response', this.listExtensionResponse)
    bbtools.on('extension-install-response', this.installExtensionResponse)
  },
  methods: {
    listExtension () {
      bbtools.send('extension-list')
    },
    listExtensionResponse (event, response) {
      if (response.code === 200) {
        this.extensions = response.data
      } else { }
    },
    install (ext) {
      if (ext.installed) {
        return
      }
      this.$set(this.installs, ext.id, {
        status: INSTALL_STATUS.downloading
      })
      bbtools.send('extension-install', ext)
    },
    installExtensionResponse (event, response) {
      if (response.code !== 200) {
        console.log('【错误】', response.message)
      } else {
        this.$set(this.installs, response.data.id, response.data)
        switch (response.data.status) {
          case INSTALL_STATUS.downloading:
            console.log('【下载中】', response.data.name, response.data.percent)
            break
          case INSTALL_STATUS.downloadedSucceed:
            console.log('【下载成功】', response.data.name)
            break
          case INSTALL_STATUS.downloadFailed:
            console.log('【下载失败】', response.data.name, response.message)
            break
          case INSTALL_STATUS.decompressing:
            console.log('【解压中】', response.data.name)
            break
          case INSTALL_STATUS.decompressSucceed:
            console.log('【解压成功】', response.data.name)
            break
          case INSTALL_STATUS.decompressFailed:
            console.log('【解压失败】', response.data.name, response.message)
            break
          case INSTALL_STATUS.installing:
            console.log('【安装中】', response.data.name)
            break
          case INSTALL_STATUS.installSucceed:
            this.extensions.map(item => {
              if (item.id === response.data.id) {
                item.installed = true
              }
              return item
            })
            console.log('【安装成功】', response.data.name)
            break
          case INSTALL_STATUS.installFailed:
            console.log('【安装失败】', response.data.name, response.message)
            break
          default:
            break
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.menu_extensions {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 15px 15px 0 15px;
  box-sizing: border-box;
  overflow-y: auto;
  .extension_item {
    width: 100%;
    height: 66px;
    margin-bottom: 15px;
    box-sizing: border-box;
    .extension_item_content {
      width: 100%;
      height: 64px;
      display: flex;
      flex-direction: row;
      align-items: center;
      box-sizing: border-box;
      .item_left {
        width: 64px;
        height: 64px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .item_left_img {
          width: 48px;
          height: 48px;
        }
      }
      .item_center {
        flex: 1;
        margin: 0 8px;
        .item_title {
          color: #202124;
          font-size: 18px;
        }
        .item_desc {
          font-size: 12px;
          color: #3c4043;
        }
      }
      .item_right {
        width: 96px;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>